import React, { useState, useEffect } from 'react';
import { Card, Descriptions, Button, Spin, message, Tag } from 'antd';
import { ArrowLeftOutlined, EditOutlined } from '@ant-design/icons';
import { history, useParams, useModel } from '@umijs/max';
import type { UserItem } from '@/types/user';
import { getUserDetail } from '@/services/userApi';

const UserDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [user, setUser] = useState<UserItem | null>(null);
  const [loading, setLoading] = useState(false);

  const { initialState } = useModel('@@initialState');

  // 获取用户详情
  const fetchUserDetail = async () => {
    if (!id) return;

    setLoading(true);
    try {
      const res = await getUserDetail(Number(id));
      setUser(res);
    } catch (error) {
      message.error('获取用户详情失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUserDetail();
  }, [id]);

  // 编辑用户
  const handleEdit = () => {
    history.push(`/user/edit/${id}`);
  };

  // 角色标签
  const renderRoleTag = (role: string) => {
    const roleMap = {
      admin: { color: 'red', text: '管理员' },
      librarian: { color: 'blue', text: '图书管理员' },
      user: { color: 'green', text: '普通用户' },
    };
    const roleInfo = roleMap[role as keyof typeof roleMap] || { color: 'default', text: role };
    return <Tag color={roleInfo.color}>{roleInfo.text}</Tag>;
  };

  // 状态标签
  const renderStatusTag = (isActive: boolean) => {
    return isActive 
      ? <Tag color="green">启用</Tag> 
      : <Tag color="red">禁用</Tag>;
  };

  if (loading) {
    return <div style={{ padding: 24, textAlign: 'center' }}><Spin size="large" /></div>;
  }

  if (!user) {
    return <div>用户不存在</div>;
  }

  return (
    <div>
      <Card style={{ marginBottom: 16 }}>
        <Button 
          icon={<ArrowLeftOutlined />} 
          onClick={() => history.push('/user/list')}
          style={{ marginRight: 8 }}
        >
          返回列表
        </Button>
        <Button 
          type="primary" 
          icon={<EditOutlined />} 
          onClick={handleEdit}
        >
          编辑用户
        </Button>
      </Card>

      <Card title="用户详情">
        <Descriptions bordered column={2}>
          <Descriptions.Item label="用户名">{user.username}</Descriptions.Item>
          <Descriptions.Item label="邮箱">{user.email || '无'}</Descriptions.Item>
          <Descriptions.Item label="姓">{user.first_name || '无'}</Descriptions.Item>
          <Descriptions.Item label="名">{user.last_name || '无'}</Descriptions.Item>
          <Descriptions.Item label="角色">
            {renderRoleTag(user.role)}
          </Descriptions.Item>
          <Descriptions.Item label="状态">
            {renderStatusTag(user.is_active)}
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">{user.created_at}</Descriptions.Item>
          <Descriptions.Item label="更新时间">{user.updated_at}</Descriptions.Item>
        </Descriptions>
      </Card>
    </div>
  );
};

export default UserDetail;